<template>
  <!-- 解析html代码，不做特殊效果 -->
  <view id="htmlParse">
    <!-- 第一层child  -->
    <block v-for="(firstbannerItem, firstbannerIndex) in htmlData" :key="firstbannerIndex">
      <block v-if="firstbannerItem.tagType == 'button'">
        <!-- 客服button -->
        <block v-if="firstbannerItem.openType == 'contact'">
          <button :class="firstbannerItem.class" :style="firstbannerItem.style" :open-type="firstbannerItem.openType">{{firstbannerItem.text}}</button>
        </block>
      </block>

      <!-- tagType == 'img' -->
      <image class="animated fadeIn"  v-if="firstbannerItem.tagType == 'img'" :mode="firstbannerItem.mode ? firstbannerItem.mode : modeStyle "
        :src="firstbannerItem.src" :class="firstbannerItem.class" style="height: auto;" :style="firstbannerItem.style"></image>

      <!-- tagType == 'a' -->
      <navigator @click.stop="navigatorClickHandle" :data-index="indexOne"  v-if="firstbannerItem.tagType == 'a'" :url="firstbannerItem.href" :target="firstbannerItem.target"
        :style="firstbannerItem.style" :class="firstbannerItem.class" hover-class="none">
        <!-- 第二层child -->
        <block v-if="firstbannerItem.text">{{firstbannerItem.text}}</block>
        <block v-for="(secondbannerItem, secondbannerIndex) in firstbannerItem.child" :key="secondbannerIndex">
          <image  class="animated fadeIn"  v-if="secondbannerItem.tagType == 'img'" :mode="secondbannerItem.mode ? secondbannerItem.mode : modeStyle "
            :src="secondbannerItem.src" :class="secondbannerItem.class" style="height: auto;" :style="secondbannerItem.style"></image>
          <span
            v-if="secondbannerItem.tagType == 'span'"
            :data-text="secondbannerItem.text"
            :class="secondbannerItem.class"
            :style="secondbannerItem.style">
            {{secondbannerItem.text}}
          </span>
          <h2 v-if="secondbannerItem.tagType == 'h2'" :class="secondbannerItem.class" :style="secondbannerItem.style">{{secondbannerItem.text}}</h2>
        </block>
      </navigator>
      <!-- tagType == 'div' -->
      <view
        @click.stop="cmsClickHandle"
        :data-handle="firstbannerItem.onclick"
        :data-text="firstbannerItem.text"
        :data-couponRuleId="firstbannerItem.couponruleid"
        v-if="firstbannerItem.tagType == 'div'"
        :class="firstbannerItem.class"
        :style="firstbannerItem.style">
        <block v-if="firstbannerItem.text">{{firstbannerItem.text}}</block>
        <!-- 第二层child -->
        <block v-for="(secondbannerItem, secondbannerIndex) in firstbannerItem.child" :key="secondbannerIndex">
          <h2 v-if="secondbannerItem.tagType == 'h2'" :class="secondbannerItem.class" :style="secondbannerItem.style">{{secondbannerItem.text}}</h2>
          <p
            v-if="secondbannerItem.tagType == 'p'"
            @click.stop="cmsClickHandle"
            :data-handle="secondbannerItem.onclick"
            :data-text="secondbannerItem.text"
            :data-couponRuleId="secondbannerItem.couponruleid"
            :style="secondbannerItem.style"
            :class="secondbannerItem.class"
            >{{secondbannerItem.text}}
          </p>
          <label v-if="secondbannerItem.tagType == 'label'" :class="secondbannerItem.class" :style="secondbannerItem.style">{{secondbannerItem.text}}</label>
          <span
            v-if="secondbannerItem.tagType == 'span'"
            @click.stop="cmsClickHandle"
            :data-handle="secondbannerItem.onclick"
            :data-text="secondbannerItem.text"
            :data-couponRuleId="secondbannerItem.couponruleid"
            :class="secondbannerItem.class"
            :style="secondbannerItem.style">{{secondbannerItem.text}}</span>
          <image  class="animated fadeIn"
            v-if="secondbannerItem.tagType == 'img'"
            :mode="secondbannerItem.mode ? secondbannerItem.mode : modeStyle "
            :src="secondbannerItem.src"
            :class="secondbannerItem.class"
            style="height: auto;"
            :style="secondbannerItem.style">
          </image>
          <!-- a和里面的child -->
          <navigator @click.stop="navigatorClickHandle" :data-index="indexOne"  v-if="secondbannerItem.tagType == 'a'" :url="secondbannerItem.href" :target="secondbannerItem.target"
            :class="secondbannerItem.class" :style="secondbannerItem.style" hover-class="none">
            <block>{{secondbannerItem.text}}</block>
            <block v-for="(thirdbannerItem, thirdbannerIndex) in secondbannerItem.child" :key="thirdbannerIndex">
              <span
                v-if="thirdbannerItem.tagType == 'span'"
                :data-text="thirdbannerItem.text"
                 :class="thirdbannerItem.class"
                 :style="thirdbannerItem.style">
                 {{thirdbannerItem.text}}
              </span>

              <image class="animated fadeIn" v-if="thirdbannerItem.tagType == 'img'" :mode="thirdbannerItem.mode ? thirdbannerItem.mode : modeStyle "
                :src="thirdbannerItem.src" :class="thirdbannerItem.class" style="height: auto;" :style="thirdbannerItem.style"></image>
            </block>
          </navigator>
          <!-- 第三层child div里面的div-->
          <view
            v-if="secondbannerItem.tagType == 'div'"
            @click.stop="cmsClickHandle"
            :data-handle="secondbannerItem.onclick"
            :data-text="secondbannerItem.text"
            :data-couponRuleId="secondbannerItem.couponruleid"
            :class="secondbannerItem.class"
            :style="secondbannerItem.style">
            <block v-if="secondbannerItem.text">{{secondbannerItem.text}}</block>
            <block v-for="(thirdbannerItem, thirdbannerIndex) in secondbannerItem.child" :key="thirdbannerIndex">
              <navigator @click.stop="navigatorClickHandle" :data-index="indexOne"  v-if="thirdbannerItem.tagType == 'a'" :url="thirdbannerItem.href" :target="thirdbannerItem.target"
                :class="thirdbannerItem.class" :style="thirdbannerItem.style" hover-class="none">
                 <block v-if="thirdbannerItem.text">{{thirdbannerItem.text}}</block>

                <block v-for="(fourthbannerItem, fourthbannerIndex) in thirdbannerItem.child" :key="fourthbannerIndex">
                  <image class="animated fadeIn"  v-if="fourthbannerItem.tagType == 'img'" :mode="fourthbannerItem.mode ? fourthbannerItem.mode : modeStyle "
                    :src="fourthbannerItem.src" :class="fourthbannerItem.class" :style="fourthbannerItem.style"></image>
                  <span
                    v-if="fourthbannerItem.tagType == 'span'"
                    :data-text="fourthbannerItem.text"
                     :class="fourthbannerItem.class"
                     :style="fourthbannerItem.style">
                     {{fourthbannerItem.text}}
                  </span>
                </block>
              </navigator>
              <h2 v-if="thirdbannerItem.tagType == 'h2'" :class="thirdbannerItem.class" :style="thirdbannerItem.style">{{thirdbannerItem.text}}</h2>
              <p
                v-if="thirdbannerItem.tagType == 'p'"
                @click.stop="cmsClickHandle"
                :data-handle="thirdbannerItem.onclick"
                :data-text="thirdbannerItem.text"
                :data-couponRuleId="thirdbannerItem.couponruleid"
                :style="thirdbannerItem.style"
                :class="thirdbannerItem.class"
                >{{thirdbannerItem.text}}</p>
              <label v-if="thirdbannerItem.tagType == 'label'" :class="thirdbannerItem.class" :style="thirdbannerItem.style">{{thirdbannerItem.text}}</label>
              <span
                v-if="thirdbannerItem.tagType == 'span'"
                @click.stop="cmsClickHandle"
                :data-handle="thirdbannerItem.onclick"
                :data-text="thirdbannerItem.text"
                :data-couponRuleId="thirdbannerItem.couponruleid"
                :class="thirdbannerItem.class"
                :style="thirdbannerItem.style">{{thirdbannerItem.text}}</span>
              <image v-if="thirdbannerItem.tagType == 'img'"
              :mode="thirdbannerItem.mode ? thirdbannerItem.mode : modeStyle "
               :src="thirdbannerItem.src"
               :class="thirdbannerItem.class"
               style="height: auto;"
               :style="thirdbannerItem.style"></image>

              <!-- 第四层循环 tagType == 'div'-->
              <view v-if="thirdbannerItem.tagType == 'div'" :class="thirdbannerItem.class" :style="thirdbannerItem.style">
                <block v-if="thirdbannerItem.text">{{thirdbannerItem.text}}</block>
                <block v-for="(fourthbannerItem, fourthbannerIndex) in thirdbannerItem.child" :key="fourthbannerIndex">
                  <navigator @click.stop="navigatorClickHandle" :data-index="indexOne"  class="animated fadeInRight"  v-if="fourthbannerItem.tagType == 'a'" :url="fourthbannerItem.href" :target="fourthbannerItem.target"
                    :class="fourthbannerItem.class" :style="fourthbannerItem.style" hover-class="none">
                    <block v-if="fourthbannerItem.text">{{fourthbannerItem.text}}</block>

                    <block v-for="(fifthbannerItem, fifthbannerIndex) in fourthbannerItem.child" :key="fifthbannerIndex">
                      <image v-if="fifthbannerItem.tagType == 'img'" :mode="fifthbannerItem.mode ? fifthbannerItem.mode : modeStyle "
                        :src="fifthbannerItem.src" :class="fifthbannerItem.class" style="height: auto;" :style="fifthbannerItem.style"></image>
                      <span
                        v-if="fifthbannerItem.tagType == 'span'"
                        :data-text="fifthbannerItem.text"
                         :class="fifthbannerItem.class"
                         :style="fifthbannerItem.style">
                         {{fifthbannerItem.text}}
                      </span>
                    </block>
                  </navigator>
                  <h2 v-if="fourthbannerItem.tagType == 'h2'" :style="fourthbannerItem.style" :class="fourthbannerItem.class">{{fourthbannerItem.text}}</h2>
                  <p v-if="fourthbannerItem.tagType == 'p'" :style="fourthbannerItem.style" :class="fourthbannerItem.class">{{fourthbannerItem.text}}</p>
                  <!-- 第五层循环 tagType == 'div'-->
                  <view v-if="fourthbannerItem.tagType == 'div'" :class="fourthbannerItem.class" :style="fourthbannerItem.style">
                    <block v-if="fourthbannerItem.text">{{fourthbannerItem.text}}</block>
                    <block v-for="(fifthbannerItem, fifthbannerIndex) in fourthbannerItem.child" :key="fifthbannerIndex">
                      <navigator @click.stop="navigatorClickHandle" :data-index="indexOne"  v-if="fifthbannerItem.tagType == 'a'" :url="fifthbannerItem.href" :target="fifthbannerItem.target"
                        :class="fifthbannerItem.class" :style="fifthbannerItem.style" hover-class="none">
                        <block v-if="fifthbannerItem.text">{{fifthbannerItem.text}}</block>

                        <block v-for="(sixthbannerItem, sixthbannerIndex) in fifthbannerItem.child" :key="sixthbannerIndex">
                          <image  class="animated fadeIn"  v-if="sixthbannerItem.tagType == 'img'" :mode="sixthbannerItem.mode ? sixthbannerItem.mode : modeStyle "
                            :src="sixthbannerItem.src" :class="sixthbannerItem.class" style="height: auto;" :style="sixthbannerItem.style"></image>
                          <span
                            v-if="sixthbannerItem.tagType == 'span'"
                            :data-text="sixthbannerItem.text"
                             :class="sixthbannerItem.class"
                             :style="sixthbannerItem.style">
                             {{sixthbannerItem.text}}
                          </span>
                        </block>
                      </navigator>
                      <image class="animated fadeIn"   v-if="fifthbannerItem.tagType == 'img'" :mode="fifthbannerItem.mode ? fifthbannerItem.mode : modeStyle "
                        :src="fifthbannerItem.src" :class="fifthbannerItem.class" style="height: auto;"  :style="fifthbannerItem.style"></image>
                      <h2 v-if="fifthbannerItem.tagType == 'h2'" :style="fifthbannerItem.style" :class="fifthbannerItem.class">{{fifthbannerItem.text}}</h2>
                    </block>
                  </view>
                </block>
              </view>
            </block>
          </view>
        </block>
      </view>

      <!-- tagType == 'h2' -->
      <view v-if="firstbannerItem.tagType == 'h2' || firstbannerItem.tagType == 'h1' || firstbannerItem.tagType == 'h3'"
        :class="firstbannerItem.class" :style="firstbannerItem.style">
        <block v-if="firstbannerItem.text">{{firstbannerItem.text}}</block>
      </view>

      <!-- tagType == 'p' -->
      <view
        @click.stop="cmsClickHandle"
        :data-handle="firstbannerItem.onclick"
        :data-text="firstbannerItem.text"
        :data-couponRuleId="firstbannerItem.couponruleid"
        v-if="firstbannerItem.tagType == 'p'"
        :class="firstbannerItem.class"
        :style="firstbannerItem.style">
        <block v-if="firstbannerItem.text">{{firstbannerItem.text}}</block>
        <block v-for="(secondbannerItem,secondbannerIndex) in firstbannerItem.child" :key="secondbannerIndex">
          <span v-if="secondbannerItem.tagType == 'span'" :class="secondbannerItem.class" :style="secondbannerItem.style">{{secondbannerItem.text}}</span>

          <navigator @click.stop="navigatorClickHandle" :data-index="indexOne"  v-if="secondbannerItem.tagType == 'a'" :url="secondbannerItem.href" :target="secondbannerItem.target"
            :class="secondbannerItem.class" :style="secondbannerItem.style" hover-class="none">{{secondbannerItem.text}}</navigator>
           <view v-if="secondbannerItem.tagType == 'strong'" :class="secondbannerItem.class" :style="secondbannerItem.style">{{secondbannerItem.text}}</view>
        </block>
      </view>
    </block>
  </view>
</template>

<script>
  export default {
    props: {
      htmlData: Array,
    },

    data(){
      return {
        modeStyle:'widthFix',
      }
    },

    created() {
      let that = this;
    },
    methods: {
      navigatorClickHandle(e){
        let index = e.currentTarget.dataset.index;
        // this.$EFSTracking.trackingAction('CLICK_CMS',JSON.stringify({"handleName":this.CMSItem[0][index]["title"],"pageId": this.CMSItem[0][index]["pageId"],"index": index,"text":"none"}),{});
      },

      cmsClickHandle(e){
        let handleName = e.target.dataset.handle ||  e.currentTarget.dataset.handle;
        let text = e.target.dataset.text || '';
        let title = e.target.dataset.title || e.currentTarget.dataset.title;
        if(!handleName){
          return
        }

      },
    },
  }
</script>

<style lang="less">
  // 图片来回滑动效果
  @-webkit-keyframes animatedBackground {
      0% { background-position: 0 0; }
      12% { background-position: 50% 0; }
      25% { background-position: 100% 0; }
      38% { background-position: 50% 0; }
      50% {background-position: 0 0; }
      62% {background-position: 50% 0; }
      75% {background-position: 100% 0; }
      88% {background-position: 50% 0; }
      100% {background-position: 0 0; }
  }
  @-moz-keyframes animatedBackground {
      0% { background-position: 0 0; }
      12% { background-position: 50% 0; }
      25% { background-position: 100% 0; }
      38% { background-position: 50% 0; }
      50% {background-position: 0 0; }
      62% {background-position: 50% 0; }
      75% {background-position: 100% 0; }
      88% {background-position: 50% 0; }
      100% {background-position: 0 0; }
  }
  @-o-keyframes animatedBackground {
      0% { background-position: 0 0; }
      12% { background-position: 50% 0; }
      25% { background-position: 100% 0; }
      38% { background-position: 50% 0; }
      50% {background-position: 0 0; }
      62% {background-position: 50% 0; }
      75% {background-position: 100% 0; }
      88% {background-position: 50% 0; }
      100% {background-position: 0 0; }
  }
  @keyframes animatedBackground {
      0% { background-position: 0 0; }
      12% { background-position: 50% 0; }
      25% { background-position: 100% 0; }
      38% { background-position: 50% 0; }
      50% {background-position: 0 0; }
      62% {background-position: 50% 0; }
      75% {background-position: 100% 0; }
      88% {background-position: 50% 0; }
      100% {background-position: 0 0; }
  }


  /* 跑马灯 */
  // @keyframes marquee-news {
  //   0% {
  //   transform: translate3d(60%, 0, 0);
  //   }

  //   // 50% {
  //   // transform: translate3d(0, 0, 0);
  //   // }

  //   100% {
  //   transform: translate3d(-100%, 0, 0);
  //   }
  // }
</style>
